<template>
  <view class="ctimer">
    <view class="ctimer-title">{{title}}</view>
    <van-count-down
      use-slot
      :time="countdown"
      @change="onChange"
      class="ctimer-countdown"
    >
      <view
        class="ctimer-item"
        v-if="days!==false"
      >
        <text class="ctimer-item__num">{{ days }}</text>
        <text class="ctimer-item__txt">{{ itemText.days }}</text>
      </view>
      <view class="ctimer-item">
        <text class="ctimer-item__num">{{ hours }}</text>
        <text class="ctimer-item__txt">{{ itemText.hours }}</text>
      </view>
      <view class="ctimer-item">
        <text class="ctimer-item__num">{{ minutes }}</text>
        <text class="ctimer-item__txt">{{ itemText.minutes }}</text>
      </view>
      <view
        class="ctimer-item"
        v-if="seconds!==false"
      >
        <text class="ctimer-item__num">{{ seconds }}</text>
        <text class="ctimer-item__txt">{{ itemText.seconds }}</text>
      </view>
    </van-count-down>
  </view>
</template>

<script>
import { formatNumber } from '@/utils'
export default {
  name: 'CountDownTimer',
  props: {
    title: String,
    value: Number,
    lang: {
      type: String,
      default: 'en'
    }
  },
  computed: {
    countdown () {
      return this.value
    },
    itemText () {
      if (this.lang === 'en') {
        return {
          days: 'days',
          hours: 'hours',
          minutes: 'mins',
          seconds: 'secs'
        }
      } else {
        return {
          days: '天',
          hours: '时',
          minutes: '分',
          seconds: '秒'
        }
      }
    },
    days () {
      if (this.data.days > 0) {
        return formatNumber(this.data.days)
      } else {
        return false
      }
    },
    hours () {
      return formatNumber(this.data.hours)
    },
    minutes () {
      return formatNumber(this.data.minutes)
    },
    seconds () {
      if (this.data.days > 0) {
        return false
      } else {
        return formatNumber(this.data.seconds)
      }
    }
  },
  data () {
    return {
      data: {
        days: 0,
        hours: 0,
        minutes: 0,
        seconds: 0
      }
    }
  },
  methods: {
    onChange (e) {
      const now = e.mp.detail
      if ((now.days > 0 && now.minutes !== this.data.minutes) || now.days === 0) {
        this.data = now
      }
    }
  }
}
</script>

<style lang="less">
.ctimer {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 100%;
    text-align: center;
    .van-count-down {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    &-item {
      flex-basis: 30%;
      display: flex;
      align-items: center;
      flex-direction: column;
      &__num {
        display: inline-block;
        color: #fff;
        font-size: 24px;
        background-color: #000;
        padding: 10px 10px 8px;
        font-family: 'LCDDate' !important;
        border-radius: 5px;
        vertical-align: baseline;
      }
      &__txt {
        font-size: 12px;
        margin-top: 5px;
        text-transform: capitalize;
      }
    }
  }
</style>
